import React, { Component } from 'react'
import { Icon } from 'antd-mobile'
import { TopNavHeader, HintMessage } from '../common'
import { CentificationStepOne, CentificationStepTwo, CentificationStepThree } from './'

export default class CentificationPage extends Component {
  constructor() {
    super()
    this.renderProcedure = this.renderProcedure.bind(this)
    this.state = {
      procedure: 1,
    }
  }
  render() {
    const { procedure } = this.state
    return (
      <div className={`rt-centification-container cm-flex-container`}>
        <TopNavHeader title="实名认证" />
        <HintMessage text="账户名：131****1234" extraText="认证规则" />

        <div className={`rt-step-descriptor`}>
          <span>1、证件拍照</span>
          <span>2、身份信息</span>
          <span>3、认证完成</span>
        </div>
        <div className={`rt-schedule-ui`}>
          <span className={`rt-solid-circle ${procedure >= 1 ? 'rt-active' : ''}`}></span>
          <span className={`rt-line ${procedure >= 2 ? 'rt-active' : ''}`}></span>
          <span className={`rt-solid-circle ${procedure >= 2 ? 'rt-active' : ''}`}></span>
          <span className={`rt-line ${procedure >= 3 ? 'rt-active' : ''}`}></span>
          <span className={`rt-solid-circle ${procedure >= 3 ? 'rt-active' : ''}`}></span>
        </div>

        <div className={`rt-operating-space`}>
          {this.renderProcedure()}
        </div>
      </div>
    )
  }
  renderProcedure() {
    const { procedure } = this.state
    switch (procedure) {
      case 1: return <CentificationStepOne nextStep={() => this.setState({procedure: 2})} />
      case 2: return <CentificationStepTwo nextStep={() => this.setState({procedure: 3})} />
      case 3: return <CentificationStepThree goBack={() => this.setState({procedure: 1})} />
      default: return null
    }
  }
}